import { defineComponent, onMounted } from "vue";
export default defineComponent({
  props: {
    option: {
      type: Object,
      default: {},
    },
    types: {
      type: String,
      default: "",
    },
  },
  setup(props) {
    let dataa = [];
    let datab = [];
    let datac = [];
    let datad = [];
    for (let i = 0; i < 12; i++) {
      dataa.push(Math.floor(Math.random() * 150 + 1));
      datab.push(Math.floor(Math.random() * 150 + 1));
      datac.push(Math.floor(Math.random() * 150 + 1));
      datad.push(Math.floor(Math.random() * 150 + 1));
    }
    onMounted(() => {
      var myChart = window.echarts.init(document.getElementById("echarDx"));
      myChart.setOption({
        grid: {
          left: "0%",
          right: "0%",
          bottom: "10%",
          top: "5%",
          containLabel: true,
        },
        textStyle: {
          //设置字体颜色
          fontSize: 14,
          color: "#fff",
        },
        legend: {
          data: ["发鞋", "发衣", "存衣", "回收"],
          bottom: "0px",
          textStyle: {
            //设置字体颜色
            color: "#fff",
          },
        },
        tooltip: {},
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#31C090 ",
            },
          },
          data: [
            "02:00",
            "04:00",
            "06:00",
            "08:00",
            "10:00",
            "12:00",
            "14:00",
            "16:00",
            "18:00",
            "20:00",
            "22:00",
            "24:00",
          ],
        },
        yAxis: {
          splitLine: {
            //间隔线
            lineStyle: {
              color: "#2A498E", //间隔线的颜色
            },
          },
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: "bar",
            name: "发鞋",
            barWidth: "10px",
            data: dataa,
            itemStyle: {
              color: new window.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#11D9EC" },
                { offset: 0.5, color: "#018FDC" },
              ]),
            },
          },
          {
            type: "bar",
            name: "发衣",
            barWidth: "10px",
            data: datab,
            itemStyle: {
              color: new window.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#E6CBFC" },
                { offset: 0.5, color: "#A790FC" },
              ]),
            },
          },
          {
            type: "bar",
            name: "存衣",
            barWidth: "10px",
            data: datac,
            itemStyle: {
              color: new window.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#82F5DB" },
                { offset: 0.5, color: "#31C090" },
              ]),
            },
          },
          {
            type: "bar",
            name: "回收",
            barWidth: "10px",
            data: datad,
            itemStyle: {
              color: new window.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#4E67F8 " },
                { offset: 0.5, color: "#303DC6" },
              ]),
            },
          },
        ],
      });
    });

    return () => (
      <>
        <div class="echarDx h100 " id="echarDx">
          1333
        </div>
      </>
    );
  },
});
